<link rel="stylesheet" type="text/css" href="__CSS__/gonggantu.css" />

<link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />
{include file="index/question_bank/canvas_structure_ques" /}




<div style="margin-top:10px;width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 200px;position: relative;margin-left: 45%;">
        用户体验地图

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="__IMG__/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">
                用户体验地图用一种讲故事的方式，从一个特定用户的视角出发，记录用户完成目标离开的全部过程，包括：用户在这个场景中的触点、行为、想法感受、情绪变化以及痛点等。
            </span>
        </div>

    </div>
</div>



<!--具体条目分块-->
<table class="ques_table" style="">
    {volist name="types" id="t"}
    <tr>
        <td style="">
            {$t.type_name}

            {if condition="$t.type_name == '情感波动'"}
            <br><br>
            <i style="text-align: left">(情绪等级:<br>正数代表振奋、高涨等，<br>负数代表忧虑、低落等，<br>数值越高情绪越正面)</i>
            {/if}
        </td>
        {if condition="$t.type_name == '情感波动'"}
        <td colspan="4">
          <div id="echarts" style="height: 400px; width: 1000px">情感波动图</div>
        </td>
        {else/}
        {foreach name="column_num" item="idx"}
        <td>

            {volist name="pre_records" id="r"}
            {if condition="$r.type_name == $t.type_name && $r.user_travel_column == $idx"}
            {include file="index/question_bank/canvas_template_ques" /}
            {/if}
            {/volist}

        </td>
        {/foreach}
        {/if}

    </tr>

    {/volist}


</table>

<!-- echarts import -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.7/dist/echarts.min.js"></script>

<script>
var symbolSize = 20;
//var data = [[0, 0], [1, 0], [2, 0], [3, 0]]; // 初始显示点数据
var data = '{:json_encode($emotion_curve_data)}'; // 初始显示点数据
data = JSON.parse(data)
console.log('data',data)

option = {
    title: {
        text: '情绪等级',
    },
    tooltip: {
        triggerOn: 'none',
        formatter: function (params) {
            return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
        }
    },
    grid: {
        left: '10%',
        top: '10%',
        right: '10%',
        bottom: '10%'
    },
    xAxis: {
        minInterval: 1,
        name: '路径阶段',
        nameTextStyle: {
            fontSize: 18
        },
        min: 0,
        max: 3,
        type: 'value',
        axisLine: {onZero: false},
        minInterval: 1
    },
    yAxis: {
        min: -3.5,
        max: 3.5,
        type: 'value',
        axisLine: {onZero: false},
        interval: 0.5,
        splitLine: {
            show: false
        },
        splitArea: {
            show: true,
            areaStyle: {
                // 两个相同颜色构成一组
                color: [
                    'rgba(0, 0, 255, 0.8)', 'rgba(0, 0, 255, 0.8)',
                    'rgba(0, 0, 255, 0.5)', 'rgba(0,0 , 255, 0.5)',
                    'rgba(0, 0, 255, 0.2)', 'rgba(0, 0, 255, 0.2)',
                    'rgba(175, 215, 237, 0.3)', 'rgba(175, 215, 237, 0.3)',
                    'rgba(255, 0, 0, 0.2)', 'rgba(255, 0, 0, 0.2)',
                    'rgba(255, 0, 0, 0.5)', 'rgba(255, 0, 0, 0.5)',
                    'rgba(255, 0, 0, 0.8)', 'rgba(255, 0, 0, 0.8)'
                ]
            }
        },
        axisLabel: {
            formatter: function(value, index){
                // 只显示整数值
                if(Math.floor(value) === value){
                    return value
                }
            }
        }
    },
    series: [
        {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            data: data
        }
    ]
};

var myChart = echarts.init(document.getElementById('echarts'))

setTimeout(function () {
    // 使用与显示点重合的不可见graphic circle作为操作点
    myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
                type: 'circle',
                position: myChart.convertToPixel('grid', item),
                shape: {
                    cx: 0,
                    cy: 0,
                    r: symbolSize / 2
                },
                invisible: true,
                draggable: true,
                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                ondragend: updatePosition,
                onmousemove: echarts.util.curry(showTooltip, dataIndex),
                onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                z: 100
            };
        })
    });
}, 0);

// 更新操作点位置，与显示点重合
function updatePosition() {
    myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
                position: myChart.convertToPixel('grid', item)
            };
        })
    });


    var preId = JSON.parse('{:json_encode($emotion_curve_prepared_id)}');
    console.log('updatePositionData',data);
    $.ajax({
        type: "POST",
        url: "__PUBLIC__/index/index/updateEmotionCurve",
        data: {
            preIdArr: JSON.stringify(preId),
            userId: "{$_COOKIE['user']}",
            newContents: JSON.stringify(data)
        },
        success: function (result) {
            //console.log(result);
        }
    })

}

// 提示显示点位置
function showTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex
    });
}

// 隐藏显示点位置提示
function hideTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'hideTip'
    });
}

// 拖动操作点时操作
function onPointDragging(dataIndex, dx, dy) {
    var y = myChart.convertFromPixel('grid', this.position)[1];
    const absMax = 3
    y = y > absMax ? absMax : y; // 限制y轴移动范围
    y = y < -absMax ? -absMax : y;
    y = y > ((Math.ceil(y) + Math.floor(y)) / 2) ? Math.ceil(y) : Math.floor(y); // 取接近整数点
    data[dataIndex][1] = y;

    // 更新显示点位置
    myChart.setOption({
        series: [{
            id: 'a',
            data: data
        }]
    });
}

// 初始化
myChart.setOption(option)

</script>

<script>



    //画布的  信息上边栏  随滚动条移动自动到达屏幕顶端
    var _box_y = $("#work_top_window").offset().top;
    $(window).scroll(function(){
        if($(window).scrollTop() > _box_y){
            $("#work_top_window").css("top",$(window).scrollTop()+"px");
            $("#work_top_window").css("z-index",101);
        }else{
            $("#work_top_window").css("top",_box_y);
        }
    });




    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);



    var crtRecordId = 0;

    // 防抖
    var debounce = (function () {
        var timeout = null;
        return function() {
            if(timeout !== null){
                clearTimeout(timeout);
            }
            timeout = setTimeout(function () {
                editRecord(window.crtRecordId);
            }, 1000);
        }
    })();

    //调用后台编辑函数；更改字数统计div；广播新内容
    function onkeyupForTextarea(recordId){
        var id = "record_" + recordId;

        this.crtRecordId = recordId;
        //不需要显示edit按钮了
        //$('#'+id).next().children('.edit_btn').show();


        // 触发防抖函数(editRecord)
        debounce();


        var newContent = $('#'+id).val().length + "/50";
        $('#text_count_' + recordId).html(newContent );


    }

    function editRecord( record_id){
        var value = $('#record_'+ record_id).val();

        $('#auto_save').text('自动保存中...');

        //insert into database

        $.ajax({
            type:"POST",
            url:"__PUBLIC__/index/index/editQuesRecord",
            data: {
                preId: record_id,
                newRecord: value,
                userId:"{$_COOKIE['user']}"
            },
            success:function (result) {
                setTimeout(function () {
                    $('#auto_save').text('√自动保存成功');
                }, 1000);



            }
        })
    }


    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
            isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
            addEvent = function (type, callback) {
                elem.addEventListener ?
                    elem.addEventListener(type, callback, false) :
                    elem.attachEvent('on' + type, callback);
            },
            getStyle = elem.currentStyle ? function (name) {
                var val = elem.currentStyle[name];

                if (name === 'height' && val.search(/px/i) !== 1) {
                    var rect = elem.getBoundingClientRect();
                    return rect.bottom - rect.top -
                        parseFloat(getStyle('paddingTop')) -
                        parseFloat(getStyle('paddingBottom')) + 'px';
                };

                return val;
            } : function (name) {
                return getComputedStyle(elem, null)[name];
            },
            minHeight = parseFloat(getStyle('height'));

        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                padding = 0,
                style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            //scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                //scrollTop += parseInt(style.height) - elem.currHeight;
                //document.body.scrollTop = scrollTop;
                //document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };

</script>

<style>
    .ques_table{
        border: 1px black solid;min-height:200px;margin-left: 220px;margin-top: 10px;clear: both;
        border-collapse: collapse;
    }

    .ques_table tr{
        border-bottom: 1px black solid;
    }

    .ques_table tr:last-child{
        border: none;
    }
    .ques_table td{
        border-right: 1px black solid;
        text-align: center;
        vertical-align: top;
        width: 200px;
    }

    .ques_table td:first-child{
        vertical-align: middle;
    }

    .ques_table td:last-child{
        border:none;
    }

    .record_area{
        margin: 10px;
        border:none;
        width: 200px;
        height: 70px;
    }

    .readOnly{
        cursor:not-allowed;
        background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);

    }

    .text_count{
        right: 10px;
        bottom: 8%;
        left: initial;
    }

    .canvas_template_div{
        margin: 0 15px;
    }

    .flag_importance_line{
        height: 90px;
    }
</style>